iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
2
Modern Web

前端「設計」聖光之路系列 第 21

網頁設計規範 - 參考來源

  • 分享至 

  • xImage
  •  

網頁設計許多概念是受到限制的,因為除了設計外也要同時重視可行性,因此預先定義規範不僅預先了解可執行的限制,對於工程師來說更方便預先建構元件。

但設計規範並不是一件容易的事情,同時必須在意可行性、延展性、穩定性。

  • 可行性:確保規範是可以被執行的
  • 延展性:未來的更新是有預先規劃的
  • 穩定性:不可隨意進行破壞性更新(break change)

本篇提供一些概念給予參考,讓還沒有想法的設計師了解可以從何取得資源,並且慢慢著手加入設計規範。

Bootstrap

Bootstrap 官網:https://getbootstrap.com/
繁中版:https://bootstrap.hexschool.com/

Bootstrap 是網頁使用的 CSS 函式庫,內建許多現成樣式可以直接運用,讓不熟 CSS 或設計的開發者都可以做出一定品質的網頁,是目前使用最為廣泛的 CSS 函式庫(沒有之一)。

雖然他預先定義的樣式不一定被設計師所喜歡,但卻是非常標準、符合網頁開發原則的。以下列的標題字來說尺寸的變化具有一定的級數變化,轉換為網站運用的尺寸也是固定的整數。

https://ithelp.ithome.com.tw/upload/images/20181104/20083608zhH3jmQfDX.png

先前所介紹的固定尺寸級數,也就是從 Bootstrap 所延伸而來,如果沒有預先定義所有標題級數,後期新增時會出現間距不明顯或間距過大等問題。

設計師用的尺寸:   工程師所用的尺寸
16px        :   1rem
20px        :   1.25rem
24px        :   1.5rem
28px        :   1.75rem
32px        :   2rem
40px        :   2.5rem

除了標準的文字、色彩的定義外,Bootstrap 在元件設計上也是用盡心力,如下方的 Navbar 為了定義出多種色彩的變化,它則是將文字的顏色設計成具有「透明度」,使他在不同色彩下都能夠自然的呈現,這樣的概念也可運用於設計之中(變化性不只案例中的三種,而是幾乎所有色彩)。

https://ithelp.ithome.com.tw/upload/images/20181104/20083608rjVANUudoR.png

Adobe XD UI Kits

Adobe XD Resource: https://www.adobe.com/tw/products/xd/resources.html

Adobe XD 目前在拓展階段,為了整合更多資源提供了 plugins、App internrations、UI Kits、Icon sets 等,不乏與各大企業合作或者整合性的服務,其中的 UI Kits 就有一份完整的網頁設計 wireframe 可作為設計規範(此份規範還不斷再更新中)。

https://ithelp.ithome.com.tw/upload/images/20181104/20083608PG7xvYeZA6.png

本份文件從基礎的色彩、文字、字體開始,並提供完整的按鈕、表單、卡片的常見網頁元件,還提供大範圍的區塊元素如:頁腳、價格表、結帳頁面、資訊陳列區塊。幾乎可以算是設計軟體版本的 Bootstrap,非常值得參考。

https://ithelp.ithome.com.tw/upload/images/20181104/20083608UAZczjxOwd.png

雖然本分設計稿是以單色呈現,但是設想了許多情境非常值得參考,以下方到表單來說就包含未填寫、填寫中、離開 focus、錯誤提示等等,而這也是我們設計表單時經常會忽略的部分。

https://ithelp.ithome.com.tw/upload/images/20181104/20083608lEw6S9lWCZ.png

在這份設計文件中,同樣的目標會提供數種排列風格做變化,以價格表來說就提供了十種變化,下圖節選四種。

https://ithelp.ithome.com.tw/upload/images/20181104/20083608sg1YwIBl43.png

Material Design

當然,最完整的設計規範還是可以參考前方不斷提到的 Material Design,不僅在應用上有完整說明,還有包含完整的設計理念,有機會可以將整份閱讀一次,對於設計規範會有很多的靈感及想法。

https://ithelp.ithome.com.tw/upload/images/20181104/20083608bffnnGrerw.png

結語

進入一個新領域時難以在短時間內就掌握所有細節,最好的方式是透過最佳範例來了解該如何運作,如 Bootstrap、Adobe XD UI Kits 都是很棒的案例,這些都具備了前人實作的經驗,並經歷上千、萬人的驗證。參考這些方式會比閉門造車有更好結果,並且增加設計規範的可行性、延展性及
穩定性。


上一篇
版面視覺動線配置(2)
下一篇
網頁設計規範 - 一致性的距離(計算方法、水平、垂直)
系列文
前端「設計」聖光之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言